<template>
  <div class="goods-sku">
    <dl v-for="(i, index) in goods.specs" :key="index">
      <dt>{{ i.name }}</dt>
      <dd>
        <template v-for="(item, num) in i.values" :key="num">
          <img
            v-if="item.picture"
            :class="{ selected: item.selected, disabled: item.disabled }"
            :src="item.picture"
            @click="itemClick(item, i.values)"
            alt=""
          />
          <span
            v-else
            :class="{ selected: item.selected, disabled: item.disabled }"
            @click="itemClick(item, i.values)"
            >{{ item.name }}
          </span>
        </template>
      </dd>
    </dl>
    <!-- <dl>
      <dt>尺寸</dt>
      <dd>
        <span class="disabled">10英寸</span>
        <span class="selected">20英寸</span>
        <span>30英寸</span>
      </dd>
    </dl>
    <dl>
      <dt>版本</dt>
      <dd>
        <span>美版</span>
        <span>港版</span>
      </dd>
    </dl> -->
  </div>
</template>
<script>
import bwPowerSet from '@/vender/bwPowerSet' // 算法

// 定义拿到有库存的skus数组字典
function getPathMap (skus) {
  const pathMap = {}
  const str = '##'
  skus.forEach(item1 => {
    if (item1.inventory) {
      const _arr = bwPowerSet(item1.specs.map(item2 => item2.valueName))
      _arr.forEach(i => {
        pathMap[i.join(str)] = true
      })
    }
  })
  return pathMap
}

/*
 *默认禁用状态的处理
 *1.拿到该商品的每一种规格值查看数据字典查询,如果值undefined,说明对应的规格没有库存
 *2.在该规格specs中定义一个属性disabled 为true
 *3.将该属性应用到页面上
 *
 *选择某个规格后再次进行是否禁用,与其搭配不存在数组字典中
 *1.拿到已选的商品规格,而且该规格是一个数组,有选择就是相对应规格名,没选择就是undefined
 *2.在更新按钮禁用状态方法中加入已选择处理
 *
 */

function upDateDisabledState (goods, pathMap) {
  console.log(getSelect(goods))
  const _selectArr = getSelect(goods)
  goods.specs.forEach((item1, index) => {
    item1.values.forEach(item2 => {
      if (_selectArr[index] === item2.name) return
      _selectArr[index] = item2.name
      const _key = _selectArr.filter(v => v).join('##')
      item2.disabled = !pathMap[_key]
    })
  })
}

// 获取选中的的每一项规格数组格式 如['黑色',undefined,undefined]
function getSelect (goods) {
  const _arr = []
  goods.specs.forEach(item1 => {
    let bool = item1.values.find(item2 => item2.selected)
    bool = bool ? bool.name : bool
    _arr.push(bool)
  })
  return _arr
}

export default {
  name: 'GoodsSku',
  props: {
    goods: {
      type: Object,
      default: () => {}
    }
  },
  setup (props) {
    // 拿到有库存的skus数组字典
    const pathMap = getPathMap(props.goods.skus)

    upDateDisabledState(props.goods, pathMap)

    // 选择商品规格
    function itemClick (item, itemArr) {
      if (item.disabled) {
        return
      }
      if (!item.selected) {
        // 先同一属性全部取消选中
        itemArr.map(i => (i.selected = false))
        // 再单独设置
      }
      item.selected = !item.selected
      upDateDisabledState(props.goods, pathMap)
    }

    // console.log(getPathMap(props.goods.skus))
    return { itemClick }
  }
}
</script>
<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
